<template>
  <div v-if="device" class="device-detail">
    <el-descriptions :column="2" border>
      <el-descriptions-item label="设备名称">{{ device.name }}</el-descriptions-item>
      <el-descriptions-item label="设备类型"><el-tag>{{ device.type }}</el-tag></el-descriptions-item>
      <el-descriptions-item label="平台高度">{{ device.height }}</el-descriptions-item>
      <el-descriptions-item label="设备数量">{{ device.quantity }} 台</el-descriptions-item>
      <el-descriptions-item label="日租单价"><span style="color: #409eff; font-weight: bold;">￥{{ device.dailyPrice }}/天</span></el-descriptions-item>
      <el-descriptions-item label="月租单价"><span style="color: #409eff; font-weight: bold;">￥{{ device.monthlyPrice }}/月</span></el-descriptions-item>
      <el-descriptions-item label="设备状态"><el-tag :type="getStatusType(device.status)">{{ device.status }}</el-tag></el-descriptions-item>
      <el-descriptions-item label="添加时间">2024-07-01 10:30:00</el-descriptions-item>
      <el-descriptions-item label="设备规格" :span="2">{{ device.specifications || '工作高度: ' + device.height + ', 承载重量: 300kg, 平台尺寸: 1.5m×0.8m' }}</el-descriptions-item>
      <el-descriptions-item label="备注信息" :span="2">{{ device.remarks || '设备状态良好，定期维护中' }}</el-descriptions-item>
    </el-descriptions>
    
    <!-- 设备租赁记录 -->
    <div class="rental-records" style="margin-top: 20px;">
      <h4>租赁记录</h4>
      <el-table :data="deviceRentalRecords" size="small">
        <el-table-column prop="customerName" label="客户名称" />
        <el-table-column prop="startDate" label="开始日期" />
        <el-table-column prop="endDate" label="结束日期" />
        <el-table-column prop="amount" label="租金金额" />
        <el-table-column prop="status" label="状态">
          <template #default="{ row }">
            <el-tag :type="row.status === '已完成' ? 'success' : 'warning'">
              {{ row.status }}
            </el-tag>
          </template>
        </el-table-column>
      </el-table>
    </div>
  </div>
</template>

<script>
import { ref } from 'vue'

export default {
  name: 'EquipDetailDialog',
  props: {
    device: {
      type: Object,
      required: true
    }
  },
  setup() {
    // 设备租赁记录模拟数据
    const deviceRentalRecords = ref([
      {
        customerName: '成龙建筑公司',
        startDate: '2024-07-01',
        endDate: '2024-07-15',
        amount: '3000.00',
        status: '已完成'
      },
      {
        customerName: '某某工程有限公司',
        startDate: '2024-07-20',
        endDate: '2024-08-05',
        amount: '5600.00',
        status: '进行中'
      }
    ])
    
    const getStatusType = (status) => {
      const typeMap = {
        '可租赁': 'success',
        '已租出': 'warning',
        '维修中': 'danger',
        '停用': 'info'
      }
      return typeMap[status] || 'info'
    }
    
    return {
      deviceRentalRecords,
      getStatusType
    }
  }
}
</script>

<style scoped>
.device-detail {
  padding: 10px 0;
}

.rental-records h4 {
  margin: 0 0 15px 0;
  color: #303133;
  font-size: 16px;
  font-weight: 600;
  border-bottom: 2px solid #409eff;
  padding-bottom: 8px;
}

:deep(.el-descriptions__label) {
  font-weight: 600;
  color: #606266;
}

:deep(.el-descriptions__content) {
  color: #303133;
}
</style>
